<template>
    <transition>
        <el-dialog title="填写审批" v-model="showFlag" width="600px" append-to-body @close="handleClose" @open="handleOpen">
            <el-form hide-required-asterisk ref="formRef" :rules="formRule" :model="formInfo" label-width="auto"
                style="padding:30px 30px 0 30px">
                <el-form-item label="审批结果" prop="status">
                    <el-select placeholder="审批结果" v-model="formInfo.status">
                        <el-option v-for="e in status" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审批意见" prop="opinion">
                    <el-input type="textarea" v-model="formInfo.opinion" maxlength="255" rows="4"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 40px; margin-left: 372px; ">
                    <el-button @click="handleClose" size="mini">取消</el-button>
                    <el-button @click="formSubmit" size="mini" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </transition>
</template>

<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const props = defineProps({
    showDialog: {
        type: Boolean
    },
    approvalId: {
        default: ''
    },
    editForm: {
        type: Object
    }
})
const emit = defineEmits(['dialogClosed'])
const showFlag = ref(false)

const status = ref([
    { label: '批准', value: 0 },
    { label: '驳回', value: 1 },
])

const formRef = ref(null)

const formRule = ref({
    status: [
        { required: true, message: '请填写审批结果', trigger: 'blur' }
    ],
    opinion: [
        { required: true, message: '请填写审批意见', trigger: 'blur' }
    ],
})
const formInfo = reactive(
    {
        'status': '', 'opinion': '',
    },
)
const formSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            api.approval.update(
                props.approvalId, sessionStorage.getItem('userid'), formInfo.opinion, formInfo.status
            ).then((res) => {
                ElMessage({
                    message: '成功',
                    type: 'success'
                })
            }).catch((err) => {
                console.log(err)
            })

            handleClose()
        }
    })
}
const handleClose = () => {
    showFlag.value = false
    formRef.value.resetFields()
    emit('dialogClosed')
}
const handleOpen = () => {
    formInfo.status = props.editForm.approvalStatus == '未审批' ? '' : props.editForm.approvalStatus
    formInfo.opinion = props.editForm.approvalOpinion
}

watch(() => props.showDialog, (newValue, oldValue) => {
    showFlag.value = props.showDialog
})

</script>